<template>
    <div class="org-chart-page">
        <div class="chart-container">
            <OrganizationChart v-if="companyData" ref="organizationChartRef" :data="companyData" :width="chartWidth"
                :height="chartHeight" />
        </div>

        <!-- 移动端适配的操作按钮 -->
        <van-action-sheet v-model:show="showControls" title="操作面板">
            <div class="controls-content">
                <van-button type="primary" block @click="updateData">
                    更新数据
                </van-button>
                <van-button type="success" block @click="addNode">
                    添加节点
                </van-button>
                <van-button type="warning" block @click="resetView">
                    重置视图
                </van-button>
                <van-button type="primary" block @click="captureChart">
                    截图保存
                </van-button>
            </div>
        </van-action-sheet>

        <!-- 固定在底部的浮动按钮 -->
        <div class="floating-buttons">
            <van-button type="primary" round @click="showControls = true" class="control-btn">
                <van-icon name="bars" />
            </van-button>

            <van-button type="success" round @click="showHelp = true" class="help-btn">
                <van-icon name="question-o" />
            </van-button>
        </div>

        <van-popup v-model:show="showHelp" round position="bottom" :style="{ height: '40%' }">
            <van-cell-group>
                <van-cell title="操作说明" />
                <van-cell>
                    <p>• 双指缩放图表</p>
                    <p>• 单指拖动图表</p>
                    <p>• 点击节点查看详情</p>
                    <p>• 点击右下角按钮打开操作面板</p>
                </van-cell>
            </van-cell-group>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, } from 'vue-router';
import OrganizationChart from '../../components/OrganizationChart.vue';
import { getEnterpriseById } from '../../api/enterprise';

// 添加组件 name 选项
defineOptions({
    name: 'OrganizationChartPage'
})

const showControls = ref(false);
const showHelp = ref(false);
const chartWidth = ref(window.innerWidth);
const chartHeight = ref(window.innerHeight - 120); // 调整高度以适应导航栏和按钮
const route = useRoute()
const companyId = route.query.id
const companyData = ref()


// 更新数据示例
const updateData = () => {
    // 数据更新逻辑现在在组件内部处理
    console.log('数据已更新');
    showControls.value = false; // 操作后关闭面板
};

// 添加节点示例
const addNode = () => {
    // 节点添加逻辑现在在组件内部处理
    console.log('节点已添加');
    showControls.value = false; // 操作后关闭面板
};

// 重置视图
const resetView = () => {
    window.location.reload();
    showControls.value = false; // 操作后关闭面板
};

// 处理屏幕旋转和窗口大小变化
const handleResize = () => {
    setTimeout(() => {
        chartWidth.value = window.innerWidth;
        chartHeight.value = window.innerHeight - 120; // 重新计算高度
    }, 300);
};
//导出截图
const organizationChartRef = ref()

const captureChart = () => {
    organizationChartRef.value?.exportToImage()
}

const fetchChart = async (id: any) => {
    const response: any = await getEnterpriseById(id)
    if (response.code === 200) {
        companyData.value = JSON.parse(response.data.orgJson)
        console.log('获取数据成功', companyData.value)
    } else {
        console.log('获取数据失败')
    }
}
onMounted(async () => {
    window.addEventListener('orientationchange', handleResize);
    window.addEventListener('resize', handleResize);
    await fetchChart(companyId)
});
</script>

<style scoped>
.org-chart-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-container {
    flex: 1;
    overflow: hidden;
}

.controls-content {
    padding: 16px;
}

.controls-content .van-button {
    margin: 10px 0;
}

.van-popup p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
    text-align: left;
}

.floating-buttons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.floating-buttons .van-button {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>